<template>
  <div class="app">
    <div class="container">
      <h1>默认插槽</h1>
      <div class="contentBox">
        <Categroy title="美食">
          <img src="https://picsum.photos/300/300" alt="" srcset="" />
        </Categroy>
        <Categroy title="游戏">
          <ul>
            <li v-for="(game, index) in games" :key="index">{{ game }}</li>
          </ul>
        </Categroy>
        <Categroy title="电影">
          <video
            src="https://heishenhua.com/video/b1/video_WebTitle_batch.mp4"
            controls
          ></video>
        </Categroy>
      </div>
    </div>

    <div class="container">
      <h1>具名插槽</h1>
      <div class="contentBox">
        <Categroy2 title="美食">
          <img
            slot="content"
            src="https://picsum.photos/300/300"
            alt=""
            srcset=""
          />
          <div slot="footer" class="footer">
            <a href="">更多美食</a>
          </div>
        </Categroy2>
        <Categroy2 title="游戏">
          <ul slot="content">
            <li v-for="(game, index) in games" :key="index">{{ game }}</li>
          </ul>
          <div slot="footer" class="footer">
            <a href="">单机游戏</a>
            <a href="">网络游戏</a>
          </div>
        </Categroy2>
        <Categroy2 title="电影">
          <video
            src="https://heishenhua.com/video/b1/video_WebTitle_batch.mp4"
            controls
            slot="content"
          ></video>
          <!-- v-slot:插槽名 此方式只能与template搭配使用 -->
          <!-- template 也可使用原 slot="插槽名" 方式 -->
          <template v-slot:footer>
            <div class="footer">
              <a href="">热门</a>
              <a href="">推荐</a>
            </div>
            <h4>前往观景</h4>
          </template>
        </Categroy2>
      </div>
    </div>

    <div class="container">
      <h1>作用域插槽</h1>
      <div class="contentBox">
        <Categroy3 title="游戏">
          <template scope="categroy3Data">
            <ul>
              <li v-for="(game, index) in categroy3Data.gameList" :key="index">
                {{ game }}
              </li>
            </ul>
            <h4>{{ categroy3Data.msg }}</h4>
          </template>
        </Categroy3>

        <Categroy3 title="游戏">
          <template scope="{gameList,msg}">
            <ol>
              <li v-for="(game, index) in gameList" :key="index">
                {{ game }}
              </li>
            </ol>
            <h4>{{ msg }}</h4>
          </template>
        </Categroy3>

        <Categroy3 title="游戏">
          <template slot-scope="{ gameList, msg }">
            <h4 v-for="(game, index) in gameList" :key="index">
              {{ game }}
            </h4>
            <h4>{{ msg }}</h4>
          </template>
        </Categroy3>
      </div>
    </div>
  </div>
</template>

<script>
import Categroy from "./components/Categroy.vue";
import Categroy2 from "./components/Categroy2.vue";
import Categroy3 from "./components/Categroy3.vue";
export default {
  name: "App",
  components: {
    Categroy,
    Categroy2,
    Categroy3,
  },
  data() {
    return {
      games: ["英雄联盟", "绝地求生", "王者荣耀"],
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.contentBox {
  display: flex;
  gap: 20px;
}
.footer {
  display: flex;
  justify-content: space-around;
}
h4 {
  text-align: center;
}
img {
  width: 100%;
  border-radius: 10px;
}
video {
  width: 100%;
}
</style>
